<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>订单页中的 - 用户 - 模块：订单项</title>
  <style>
	*{margin: 0; padding: 0;}
	/* S - 订单 */
	.order i{display: block; width: 16px; height: 16px;}
	.order img{display: block;}
	.order{width:680px; color:#ccc; padding:5px; border:1px solid #ddd; font-size:12px; margin:20px auto; overflow:hidden;}
	.order .top{height: 25px;}
	.order .con{}
	.order .con ul li{list-style-type:none; border:1px solid #ddd; padding:6px; margin-top:2px;}
	.order .con ul li .busi_name{height:22px; font-size:14px; font-weight:bold;}
	.order .con ul li table{}
	.order .con ul li table tbody tr{}
	.order .con ul li table tbody tr td{text-align: center; width:126px; color:#ccc;     padding: 2px; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}

	.order .con ul li table tbody tr:nth-child(1) td{border-top:1px solid #ddd;}
	.order .con ul li table tbody tr td:nth-child(1){width:100px; border-left:1px solid #ddd; }
	.order .con ul li table tbody tr td:nth-child(2){width:160px;}
	.order .con ul li table tbody tr td:nth-child(3){}
	.order .con ul li table tbody tr td:nth-child(4){}
	.order .con ul li table tbody tr td:nth-child(5){}
	.order .con ul li table tbody .busi_name td{text-align:left; height:20px; padding-left:3px; border-top:1px solid #ddd;}
	.order .con ul li .li_bom{height:16px; overflow:hidden;} /*16px;46px;*/
	.order .con ul li .li_bom .order_state{height:16px;}
	.order .con ul li .li_bom .order_state label{float:right;}
	.order .con ul li .li_bom .order_state .label_logistics:hover{color:#555; cursor:pointer;}
	.order .con ul li .li_bom .order_logistics{height:18px; background:#f6f4f0; 
	padding:6px; }
	.order .order_logistics label{display:block; float:left;}
	.order .order_logistics label:nth-child(2){width:24px; height:1px; margin-left: 10px;}

	.order .order_logistics .sure_order{float:right; width:60px; height:18px; text-align:center; color:#fff; border-radius:4px; background:#e6b981; cursor:pointer;}
	.order .order_logistics .sure_order:hover{background:#f58536}

	.order .bom{}
	.order .bom label:nth-child(1){float:right;}
	/* E - 订单 */

  </style>
 </head>
 <body>
	<!-- table tr td -->
	<!-- cellspacing/cellpadding消除td之间的距离 -->
	<div class="order">
		<div class="top">
			<label>订单编号：0000</label>
			<label>时间：2017-12-26 18:55</label>
		</div>
		<div class="con">
			<ul>
				<!--商家-->
				<li>
					<div class="busi_name">
						<label style="text-align:none;">tako小衣店</label>
					</div>
					<table cellspacing="0" cellpadding="0">
						<tbody>
							<!--
							<tr class="busi_name">
								<td colspan="5">
									<label style="text-align:none;">tako小衣店</label>
								</td>
							</tr>
							-->
							<!--单个商品-->
							<tr>
								<td><img src="C:\Users\win7\Desktop\tako\tako3.jpg" width="100px" height="110px" alt="" /></td>
								<td class="goods_name">tako粉衣</td>
								<td class="goods_color">大粉</td>
								<td class="goods_size">L</td>
								<td class="goods_price">120元</td>
							</tr>
							<tr>
								<td><img src="C:\Users\win7\Desktop\tako\tako5.jpg" width="100px" height="110px" alt="" /></td>
								<td class="goods_name">tako粉衣</td>
								<td class="goods_color">大粉</td>
								<td class="goods_size">L</td>
								<td class="goods_price">120元</td>
							</tr>
						</tbody>
					</table>
					<div class="li_bom">
						<div class="order_state">
							
							<!--
							等待发货
							<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<label>等待订单确认</label>
							-->
							
							<!--
							发货中
							<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<label class="label_logistics">查看物流信息</label>
							<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<label>正在发货</label>
							<div style="clear:both;"></div>
							-->
							<!--
							确认收货-->
							<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<label class="label_logistics">查看物流信息</label>
							<label>&nbsp;&nbsp;&nbsp;&nbsp;</label>
							<label>订单完成</label>
							
						</div>
						<div class="order_logistics">
							<label>广东省 广州市 广东白云学院&nbsp;(发货地址)</label>
							<label><i style="background:url(image/to.png);"></i></label>
							<label>广西省 北海市 贵海花园一期&nbsp;(收货地址)</label>
							<label class="sure_order" style="">确认收货</label>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="bom">
			<label class="money">金额：200元</label>
		</div>
		<div style="clear:both;"></div>
	</div>
	<script src="js/Order_Mudle.js"></script>
	<script src="js/MyjsV0-3.js"></script>
	<script>
	

	

	/*
	数据解析：
	Order
		订单编号 下单时间 金额 
		
	Business 
		商家名称 是否发货 物流信息{}
		物流信息
			商户地址信息&客户地址信息
				商户地址 客户地址
	Goods 
		商品编号 图片 名称 单价 数量
	*/
	//Order:
	var toker = new JSONTokener() ;

	var orderData = new JSONObject() ;		//订单信息
	orderData.put("订单编号", "0000") ;
	orderData.put("time", "2017-12-26 18:55") ;
	orderData.put("金额", "10000") ;
	console.log(toker.parseString(orderData)) ;
	//Business:
	var BusinessData = new JSONObject() ;	//商家信息
	BusinessData.put("商家名称", "衣品之家") ;
	BusinessData.put("是否发货", "已发货") ;
	
	var LogisticsDataArray = new JSONArray() ;		//物流信息集
	var LogisticsBusinessData = new JSONObject() ;	//商户地址信息
	LogisticsBusinessData.put("商户地址", "广东省-广州市-广东白云学院") ;
	var LogisticsCustorData = new JSONObject() ;	//客户地址信息
	LogisticsCustorData.put("客户地址", "广西省-北海市-贵海花园一期") ;
	LogisticsDataArray.add(LogisticsBusinessData) ;
	LogisticsDataArray.add(LogisticsCustorData) ;

	BusinessData.put("物流信息", LogisticsDataArray) ;  //商家信息中收集物流信息
	console.log(toker.parseString(BusinessData)) ;
	//Goods:
	var GoodsData = new JSONObject() ;		//商品信息
	GoodsData.put("商品编号", "0000") ;
	GoodsData.put("图片", "图片") ;
	GoodsData.put("名称", "好看的上衣") ;
	GoodsData.put("单价", "50") ;
	GoodsData.put("数量", "2") ;
	console.log(toker.parseString(GoodsData)) ;

	//创建订单
	var of = new OrderFactory_1() ;
	var order = of.createOrder(orderData) ;

	var busi1 = of.createBusiness() ;
	var busi2 = of.createBusiness() ;

	var goods1 = of.createGoods() ;
	var goods2 = of.createGoods() ;
	var goods3 = of.createGoods() ;

	busi1.add(goods1) ;
	busi1.add(goods2) ;
	busi2.add(goods3) ;

	order.add(busi1) ;
	order.add(busi2) ;

	console.log(order.makeHTML()) ;
	</script>
 </body>
</html>